import React from 'react'
import {Select, Spin} from '../../antd'
import Http from "../utils/http"
import {getPyIndex} from '../utils/PinYinUtils';

const Option = Select.Option;

class CompanySelect extends React.Component {
    state = {
        data: [],
        source: [],
        fetching: false,
        value: this.props.value
    }

    // componentWillReceiveProps(nextProps) {
    //     const val = nextProps.value;
    //     if (this.isEmpty(val)) {
    //         return;
    //     }
    //     if (val.isClear) {
    //         this.handleChange("");
    //     }
    // }

    // isEmpty = (val) => {
    //     if (typeof val !== "undefined" && val !== null) {
    //         return val.length === 0;
    //     }
    //     return true;
    // }

    handleChange = (value) => {
        this.setState({
            value: value,
            fetching: false,
        });
        const onChange = this.props.onChange;
        if (onChange) {
            onChange(value);
        }
        const changeName = this.props.changeName;
        if (changeName) {
            if (value === "" || value === null) {
                changeName("");
            } else {
                const obj = this.state.source.filter(d => d.value === value);
                changeName(obj[0].text);
            }
        }
    }

    getCompanyName = () => {
        let companyName = null;
        this.state.data.map(n => {
            if (n.value === this.state.value) {
                companyName = n.text;
            }
        });
        return companyName;
    }

    reset = () => {
        this.handleChange(null);
    }

    componentDidMount() {
        this.setState({fetching: true});
        Http.post({
            url: `${API_URL}map-center/skushop/listSelector`,
        }).then(response => response.json())
        .then(rs => {
            const source = [];
            rs.data.forEach((r) => {
                source.push({
                    value: r.value,
                    text: r.text,
                    pyIndex: getPyIndex(r.text)
                });
            });

            this.setState({
                data: rs.data,
                source: source,
                fetching: false
            });

            if (this.state.value) {
                this.handleChange(this.state.value);
            }
        })
        .catch((error) => {});
    }

    componentWillReceiveProps(newProps){
        const {
            value
        } = newProps;
        this.setState({
            value:value,
        });
    }

    render() {
        const {fetching, source, value} = this.state;

        return (
            <Select
                value={value}
                notFoundContent={fetching ? <Spin size="small"/> : null}
                filterOption={(input, option) => option.props.search.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                onChange={this.handleChange}
                style={{width: '100%'}}
                showSearch={true}
                disabled={this.props.disabled}
                allowClear={this.props.allowClear}
                placeholder={this.props.placeholder}
                mode={this.props.mode}
                maxTagCount={this.props.maxTagCount}
            >
                {source.map(d => <Option key={d.value} search={d.value.concat(d.text).concat(d.pyIndex)}>{d.value + ' - ' + d.text}</Option>)}
            </Select>
        );
    }
}

export default CompanySelect;